<!--  -->
<template>
    <div class="bg-black p-4">
        <el-tabs v-model="activeName">
            <el-tab-pane label="新闻100条" name="first">
                <div class="container px-4 mx-auto" style="height: 60vh;overflow-y: scroll;">
                    <div class="mx-auto p-6 pb-1 border bg-white rounded-md shadow-dashboard">
                        <!-- <div class="flex flex-wrap items-center justify-between mb-1 -m-2">
      <div class="w-auto p-2">
        <h2 class="text-lg font-semibold text-coolGray-900">My Files</h2>
        <p class="text-xs text-coolGray-500 font-medium">Manage your files</p>
      </div>
      <div class="w-auto p-2">
        <a
          href="#"
          class="text-sm text-green-500 hover:text-green-600 font-semibold"
          >See all</a
        >
      </div>
    </div> -->
                        <div class="flex flex-wrap">
                            <div class="w-full border-b border-coolGray-100" v-for="item in list" :key="item"
                                @click="open(item.url)">
                                <div class="flex flex-wrap items-center justify-between py-4 -m-2">
                                    <div class="w-auto p-2">
                                        <div class="flex flex-wrap items-center -m-2">
                                            <div class="w-20 p-2 float-left">
                                                <div
                                                    class="flex items-center justify-center w-12 h-12 bg-yellow-50 rounded-md">
                                                    <img :src="item.logo">
                                                </div>
                                            </div>
                                            <div class="w-80 p-2 float-left">
                                                <h2 class="text-sm font-medium text-coolGray-900">{{ item.title }}</h2>
                                                <h3 class="text-xs font-medium text-coolGray-400 mt-2">{{ item.extra }}
                                                </h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-auto p-2">
                                        <p class="text-xs text-coolGray-500 font-medium">{{ item.sitename }}</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="国内新闻" name="n2">
                <div class="container px-4 mx-auto" style="height: 60vh;overflow-y: scroll;">
                    <div class="mx-auto p-6 pb-1 border bg-white rounded-md shadow-dashboard">
                        <!-- <div class="flex flex-wrap items-center justify-between mb-1 -m-2">
      <div class="w-auto p-2">
        <h2 class="text-lg font-semibold text-coolGray-900">My Files</h2>
        <p class="text-xs text-coolGray-500 font-medium">Manage your files</p>
      </div>
      <div class="w-auto p-2">
        <a
          href="#"
          class="text-sm text-green-500 hover:text-green-600 font-semibold"
          >See all</a
        >
      </div>
    </div> -->
                        <div class="flex flex-wrap">
                            <div class="w-full border-b border-coolGray-100" v-for="item in list2" :key="item"
                                @click="open(item.url)">
                                <div class="flex flex-wrap items-center justify-between py-4 -m-2">
                                    <div class="w-auto p-2">
                                        <div class="flex flex-wrap items-center -m-2">
                                            <div class="w-20 p-2 float-left">
                                                <div
                                                    class="flex items-center justify-center w-12 h-12 bg-yellow-50 rounded-md">
                                                    <img :src="item.picUrl">
                                                </div>
                                            </div>
                                            <div class="w-80 p-2 float-left">
                                                <h2 class="text-sm font-medium text-coolGray-900">{{ item.title }}</h2>
                                                <h3 class="text-xs font-medium text-coolGray-400 mt-2">
                                                    {{ item.description }}</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-auto p-2">
                                        <p class="text-xs text-coolGray-500 font-medium">{{ item.source }}</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="头条新闻" name="n3">
                <div class="container px-4 mx-auto" style="height: 60vh;overflow-y: scroll;">
                    <div class="mx-auto p-6 pb-1 border bg-white rounded-md shadow-dashboard">
                        <!-- <div class="flex flex-wrap items-center justify-between mb-1 -m-2">
      <div class="w-auto p-2">
        <h2 class="text-lg font-semibold text-coolGray-900">My Files</h2>
        <p class="text-xs text-coolGray-500 font-medium">Manage your files</p>
      </div>
      <div class="w-auto p-2">
        <a
          href="#"
          class="text-sm text-green-500 hover:text-green-600 font-semibold"
          >See all</a
        >
      </div>
    </div> -->
                        <div class="flex flex-wrap">
                            <div class="w-full border-b border-coolGray-100" v-for="item in list3" :key="item"
                                @click="open(item.url)">
                                <div class="flex flex-wrap items-center justify-between py-4 -m-2">
                                    <div class="w-auto p-2">
                                        <div class="flex flex-wrap items-center -m-2">
                                            <div class="w-20 p-2 float-left">
                                                <div
                                                    class="flex items-center justify-center w-12 h-12 bg-yellow-50 rounded-md">
                                                    <img :src="item.picUrl">
                                                </div>
                                            </div>
                                            <div class="w-80 p-2 float-left">
                                                <h2 class="text-sm font-medium text-coolGray-900">{{ item.title }}</h2>
                                                <h3 class="text-xs font-medium text-coolGray-400 mt-2">
                                                    {{ item.description }}</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-auto p-2">
                                        <p class="text-xs text-coolGray-500 font-medium">{{ item.source }}</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
import ax from '@/helper/axios.js'
export default {
    data() {
        return {
            list: [],
            list2: [],
            list3: [],
            activeName: 'first'
        };
    },

    components: {},

    computed: {},

    mounted() { },

    created() {
        ax.get('/tophub/hot').then(res => {
            this.list = res.data.items
            console.log('res:', res)
        });
        ax.get('/whyta/api/tx/guonei?key=ea15387c6657').then(res => {
            this.list2 = res.result.newslist
            console.log('res:', res)
        });
        ax.get('/whyta/api/tx/topnews?key=ea15387c6657').then(res => {
            this.list3 = res.result.list
            console.log('res:', res)
        });
    },

    methods: {
        open(url) {
            //document.location.href = url   
            //新窗口打开
            window.open(url, "_blank");
        }
    }
}

</script>
<style lang='scss' scoped></style>